<template>
    <div class="List">
        <div class="List-header">
            <h4 class="List-header-Text">
                <span>我的专栏</span>
            </h4>
            <div class="List-headerOptions">
                <div class="Popver">

                </div>
            </div>

        </div>
        <div class="css-1g5evo1">
            <div class="css-1jfwu0r">
                <div class="css-sumlaa">
                    <svg width="150" height="120" viewBox="0 0 150 120" fill="currentColor"><g fill="none" fill-rule="evenodd"><path fill="#EBEEF5" d="M37.273 69.98c.212-3.3 3.063-5.98 6.387-5.98h63.91c3.315 0 6.175 2.673 6.387 5.98l1.285 20.04c.212 3.302-2.302 5.98-5.615 5.98H41.603c-3.313 0-5.827-2.673-5.615-5.98l1.285-20.04zm1.71 20.23C38.88 91.788 40.02 93 41.603 93h68.023c1.58 0 2.722-1.215 2.62-2.79l-1.284-20.037c-.11-1.726-1.657-3.173-3.394-3.173H43.66c-1.74 0-3.282 1.447-3.393 3.173L38.982 90.21zM47 58h58v-3.5a1.5 1.5 0 0 1 3 0v5c0 .414-.168.79-.44 1.06a1.49 1.49 0 0 1-1.06.44h-61a1.49 1.49 0 0 1-1.06-.44A1.49 1.49 0 0 1 44 59.5v-5a1.5 1.5 0 0 1 3 0V58zm50-31H55v28.008h-3V25.992c0-1.1 1.025-1.992 2.283-1.992h43.434c1.26 0 2.283.898 2.283 1.992v29.016h-3V27zM60 87.5c0-.828.668-1.5 1.5-1.5h29c.828 0 1.5.666 1.5 1.5 0 .828-.668 1.5-1.5 1.5h-29c-.828 0-1.5-.666-1.5-1.5zM46 72.01c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm-52 7c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98zm8 0c0-.558.443-1.01 1.01-1.01h1.98c.558 0 1.01.443 1.01 1.01v1.98c0 .558-.443 1.01-1.01 1.01h-1.98c-.558 0-1.01-.443-1.01-1.01v-1.98z" fill-rule="nonzero"></path><path fill="#F7F8FA" d="M71 34.5a1.5 1.5 0 0 1 1.497-1.5h7.006a1.5 1.5 0 1 1 0 3h-7.006A1.495 1.495 0 0 1 71 34.5zm-9 8c0-.828.665-1.5 1.505-1.5h24.99a1.5 1.5 0 1 1 0 3h-24.99A1.5 1.5 0 0 1 62 42.5zm0 7c0-.828.67-1.5 1.495-1.5h19.01c.826 0 1.495.666 1.495 1.5 0 .828-.67 1.5-1.495 1.5h-19.01A1.494 1.494 0 0 1 62 49.5z"></path></g></svg>
                    <div>还没有文章，开始<a href="//zhuanlan.zhihu.com/write" target="_blank" class="css-134a7ny">写第一篇文章</a></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Column"
    }
</script>

<style scoped>
    .List-header{
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        height: 50px;
        margin: 0 20px;
        border-bottom: 1px solid #f6f6f6;
        box-sizing: border-box;
    }
    .List-header-Text{
        font-weight: 600;
        margin: 0;
    }
    h4{
        display: block;
        margin-block-start: 1.33em;
        margin-block-end: 1.33em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .List-headerOptions{
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        align-self: center;
        font-size: 14px;
    }
    .Popver{
        position: relative;
        display: inline-block;
    }
    .css-1g5evo1{
        padding: 70px 0px;
    }
    .css-1jfwu0r{
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        flex: 1 1 0%;
        height: 100%;
        display: flex;
    }
    .css-sumlaa{
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        text-align: center;
        color: rgb(133, 144, 166);
    }
    .css-sumlaa svg{
        width: 150px;
        height: 120px;
        fill: currentcolor;
    }
    .css-134a7ny{
        box-sizing: border-box;
        margin: 0px;
        min-width: 0px;
        color: rgb(23, 81, 153);
        text-decoration: none;
    }
</style>